Skip to content

Conversation

@asadjan4611
Copy link

What changes were proposed in this pull request?

This PR adds a loading skeleton/placeholder for the workflow definition list during data fetch operations, addressing issue #17948.

Changes:

  • Added NSkeleton component from Naive UI to display loading placeholder
  • Implemented conditional rendering to show skeleton during initial load, search, and pagination when no data exists
  • Set table loading prop to false to prevent triggering global loading indicators
  • Added comprehensive comments and documentation explaining the implementation

Implementation Details:

  • Skeleton displays when loadingRef === true AND tableData is empty/null
  • Skeleton repeat count matches page size for visual consistency
  • Height set to 400px to accommodate multiple skeleton rows
  • Uses Naive UI's animated shimmer effect

Benefits:

  • Improved perceived performance with immediate visual feedback
  • Better UX during slow network connections
  • Clear distinction between loading, empty, and error states
  • Isolated loading state (doesn't affect other components like navbar)

Related issue(s)

Closes #17948

Type of change

  • New feature (non-breaking change which adds functionality)

Testing

  • Tested skeleton display during initial page load
  • Tested skeleton display during search with no results
  • Tested skeleton display during pagination to empty pages
  • Verified no global loading indicators are triggered
  • Verified navbar/profile section is unaffected

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged and published

@boring-cyborg
Copy link

boring-cyborg bot commented Feb 5, 2026

Thanks for opening this pull request! Please check out our contributing guidelines. (https://github.com/apache/dolphinscheduler/blob/dev/docs/docs/en/contribute/join/pull-request.md)

@github-actions github-actions bot added the UI ui and front end related label Feb 5, 2026
@SbloodyS SbloodyS added the feature new feature label Feb 5, 2026
@SbloodyS SbloodyS added this to the 3.4.1 milestone Feb 5, 2026
@SbloodyS SbloodyS added the first time contributor First-time contributor label Feb 5, 2026
@sonarqubecloud
Copy link

Copy link
Member

@SbloodyS SbloodyS left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please don't directly use AI generated code.

@asadjan4611 asadjan4611 requested a review from SbloodyS February 10, 2026 13:45
@asadjan4611
Copy link
Author

Please don't directly use AI generated code.

No i am not directly using AI Generated Code , but i am taking help from it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature new feature first time contributor First-time contributor UI ui and front end related

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature][UI] Add loading skeleton/placeholder for workflow definition list during data fetch

2 participants